<template>
	<div class="listqi">
		<el-table :data="tableData5" border height='100%' style="height: 100%;">
			<el-table-column prop="date" label="公司名称" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="所属行业" align='center'>
			</el-table-column>
			<el-table-column prop="address" label="公司性质" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="地址" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="联系人" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="手机号码" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="详情" align='center'>
				<template slot-scope="scope">
					<!--<router-link v-bind="{to:'trainContent/'+scope.row.id}">-->
					<router-link :to="{ name:'trainContent', params: {id: scope.row.id} }">

						<el-button type="primary" size='small'>查看详情</el-button>
					</router-link>
				</template>
			</el-table-column>
		</el-table>
		<div class="pageQ">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
				</el-pagination>
			</div>
		</div>
		<router-link :to="{name:'addTrain'}">
			<div class="addpeixun">
				<el-button type="primary" size='small'>添加培训</el-button>
			</div>
		</router-link>

	</div>
</template>
<script type="text/javascript">
	export default {
		data() {
			return {
				tableData5: [{
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市',
						id: '666'
					}, {
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '888'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市',
						id: '666'
					},
				],
				//				翻页数据
				currentPage1: 5,
				currentPage2: 5,
				currentPage3: 5,
				currentPage4: 4,
				formInline: {
					user: '',
					region: ''
				},
			}
		},
		created() {

		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		},
		mounted() {
			var inputlist = document.querySelectorAll(".el-input");
			for(var i = 0; i < inputlist.length; i++) {
				inputlist[i].style.width = "110px";
			}
		}
	}
</script>
<style lang="scss" scoped>
	.listqi {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 40px;
		.query {
			position: absolute;
			z-index: 9;
			width: 100%;
			height: 40px;
			top: -45px;
			/*background-color: pink;*/
			.swquery {
				display: flex;
				justify-content: space-between;
				min-width: 896px;
			}
			.el-form-item__content {
				width: 50px;
				height: 40px;
			}
		}
		.pageQ {
			margin-top: 5px;
			float: right;
		}
		.addpeixun {
			margin-top: 5px;
			float: left;
		}
	}
</style>